<template>
	<navigatorComp title="传记" bgcColor="#121512" fontColor="#fff">
	</navigatorComp>

	<mescroll-uni
		:height="height + 'px'"
		:down="downOption"
		:up="upOption"
		@init="mescrollInit"
		@down="downCallback"
		@up="upCallback"
	>
		<view class="memoir_list">
			<view class="memoir_item" v-for="(item, index) in list">
				<view class="memoir_item_title_box">
					<view class="memoir_item_title singleLineOverflowHidden">
						{{ item.subject }}
					</view>
					<image
						@click="showMore(item)"
						src="http://112.124.50.179:8888/imgs/home/white_more.png"
						mode=""
					></image>
				</view>
				<view class="memoir_item_content">
					<view
						class="ccc"
						:style="{ marginBottom: item.content.length <= 62 ? '16rpx' : '0' }"
					>
						{{ item.isShort ? content_short(item.content) : item.content }}
					</view>
					<view
						class="memoir_item_content_expand"
						@click="expand(item)"
						v-if="item.content.length >= 62"
					>
						{{ item.isShort ? '展开' : '收起' }}
					</view>
					<view class="upload" v-if="item.imageUrl.length > 0">
						<view class="upload_list" v-for="(i, key) in item.imageUrl">
							<image
								class="upload_img"
								:src="i"
								mode=""
								@click="previewImg(item.imageUrl, i)"
							></image>
						</view>
					</view>
				</view>
				<view class="nickName">
					<text>{{ item.nickName }}</text>
					<text>{{ item.createdAt }}</text>
				</view>
			</view>
		</view>
		<footerBtn
			bgcColor="#121512"
			name="添加传记"
			@clickBtn="goUrl('/subPages/home/ancestralTemple/edit_memoir')"
		>
			<image
				style="width: 40rpx; height: 40rpx; margin-right: 4rpx"
				:src="imgUrl + 'imgs/home/add_memory.png'"
				mode=""
			></image>
		</footerBtn>
	</mescroll-uni>
	<u-popup
		:show="show"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		custom-style="padding:0 16rpx 0;"
	>
		<u-button
			shape="circle"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: '26rpx 26rpx 0 0' }"
			@click="
				goUrl(
					'/subPages/home/ancestralTemple/edit_memoir?dataObj=' + JSON.stringify(showItem)
				)
			"
		>
			编辑
		</u-button>
		<u-button
			shape="circle"
			:custom-style="{ ...moreBtnStyle, borderRadius: ' 0 0 26rpx 26rpx' }"
			@click="del"
		>
			删除
		</u-button>
		<u-button
			shape="circle"
			:custom-style="{ ...moreBtnStyle, fontWeight: 600, borderRadius: '26rpx' }"
			@click="closeMore"
		>
			取消
		</u-button>
	</u-popup>
</template>

<script setup>
import { onReady, onShow, onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import { imgUrl } from '@/external/utils/imgUrl';
import footerBtn from '/components/footerBtn/index.vue';
import navigatorComp from '/components/navigator/index.vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();
onShow(() => {
	show.value = false;
	setTimeout(() => {
		latestId.value = 0;
		getMescroll().resetUpScroll();
	}, 1);
});
onReady(() => {
	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight;
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif
});
const moreBtnStyle = {
	height: '120rpx',
	backgroundColor: '#fff',
	fontWeight: '400',
	fontSize: '40rpx',
	color: '#007AFF',
	marginBottom: '16rpx'
};
const { getMescroll, mescrollInit } = useMescroll(); // 调用mescroll的hook
//翻页信息

const downOption = ref({
	auto: false,
	use: false
});
const upOption = ref({
	auto: false
});
let list = ref([]);
let latestId = ref(0);
let height = ref(0);
let show = ref(false);
let showItem = ref({});
const expand = (item) => {
	item.isShort = !item.isShort;
};
const content_short = (content) => {
	return content.length > 60 ? content.substring(0, 62) + '...' : content;
};
const del = () => {
	homeApi
		.deleteHallLifeApi({
			hallId: uni.getStorageSync('hallId'),
			lifeId: showItem.value.lifeId
		})
		.then((res) => {
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
			latestId.value = 0;
			getMescroll().resetUpScroll();
			show.value = false;
		})
		.catch(() => {});
};
const showMore = (item) => {
	show.value = true;
	showItem.value = item;
	console.log(showItem.value);
};
const closeMore = (item) => {
	show.value = false;
};
const downCallback = (mescroll) => {
	latestId.value = 0;
	getMescroll().resetUpScroll();
};

const upCallback = (mescroll) => {
	homeApi
		.getHallLifeListApi({
			hallId: uni.getStorageSync('hallId'),
			latestId: latestId.value
		})
		.then((res) => {
			const curPageData = res.data.lifeList || []; // 当前页数据
			if (latestId.value == 0) list.value = [];
			curPageData.forEach((ele) => {
				ele.isShort = true;
			});
			list.value = list.value.concat(curPageData);
			list.value = list.value.map((item) => {
				return {
					...item,
					imageUrl: item.imageUrl.split(',').filter((item) => item !== '')
				};
			});
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].lifeId || 0;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};
const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
const previewImg = (imgArr, img) => {
	uni.previewImage({
		urls: imgArr,
		current: img
	});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	overflow: hidden;
	box-sizing: border-box;
}

.ccc {
	word-wrap: break-word;
	/* 或者使用 overflow-wrap: break-word; */
	white-space: pre-wrap;
	/* 或者使用 white-space: normal; */
}

.edit {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

.memoir_list {
	padding: 32rpx;
	box-sizing: border-box;

	.memoir_item {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background: #292b2a;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-bottom: 24rpx;
	}

	.memoir_item_title_box {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		.memoir_item_title {
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 38rpx;
			margin-right: 70rpx;
			-webkit-line-clamp: 2;
			margin-bottom: 16rpx;
		}

		image {
			margin-top: -8rpx;
			margin-right: -8rpx;
			width: 48rpx;
			height: 48rpx;
			flex-shrink: 0;
		}
	}

	.memoir_item_content {
		width: 100%;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 42rpx;
		text-align: justify;

		.memoir_item_content_expand {
			text-align: right;
			float: right;
			width: 100%;
			font-size: 28rpx;
			color: #f3e0bb;
			line-height: 42rpx;
			display: inline;
		}

		.upload {
			margin: 16rpx 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: 22rpx;
			grid-row-gap: 22rpx;
			width: 100%;

			.upload_list {
				width: 100%;
				height: 190rpx;

				.upload_img {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}
		}
	}

	.nickName {
		color: #999999;
		font-size: 24rpx;

		text {
			padding-right: 24rpx;
		}
	}
}
</style>
